
<template>
  <div>
    <a-transfer
      show-search
      v-model:target-keys="targetKeys"
      v-model:selected-keys="selectedKeys"
      :data-source="mockData"
      :titles="['Source', 'Target']"
      :disabled="disabled"
      @change="handleChange"
      @selectChange="handleSelectChange"
      @scroll="handleScroll"
      :list-style="{
      width: '500px',
      height: '500px',
    }"
      :operations="['1', '2']"
      pagination
    >
      <template #footer="{ direction }">
        <a-button
          v-if="direction === 'left'"
          size="small"
          style="float: left; margin: 5px"
        >
          left reload
        </a-button>
        <a-button
          v-else-if="direction === 'right'"
          size="small"
          style="float: right; margin: 5px"
        >
          right reload
        </a-button>
      </template>
      <template #notFoundContent>
        <span>没数据</span>
      </template>
      <template #render="item">
        <span
          class="custom-item"
          style="color: red"
        >{{ item.title }} - {{ item.description }}</span>
      </template>

    </a-transfer>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      mockData: [],
      oriTargetKeys: [],
      targetKeys: [],
      selectedKeys: ['1', '4'],
      disabled: false,

    }
  },
  created() { },
  mounted() {
    for (let i = 0; i < 20; i++) {
      this.mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        disabled: i % 3 < 1,
      });
    }
    this.targetKeys = this.oriTargetKeys = this.mockData.filter(item => +item.key % 3 > 1).map(item => item.key)
  },
  methods: {
    handleChange() {

    },
    handleSelectChange() {

    },
    handleScroll() {

    },

  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
